<template>
    <div class="tabs">
        <h1>{{activeName}}</h1>
          <el-tabs v-model="activeName">
            <el-tab-pane label="未读" name="unread">
                未读内容
                <ul>
                    <li v-for="item,index in unReadCom" :key="index">
                        <span>{{item.title}}</span>
                        <span>{{item.date}}</span>
                        <el-button type="primary" @click="handleRead(item,index)">标为已读</el-button>
                    </li>
                </ul>
                <!-- 分页 -->
                 <el-pagination

                    :current-page.sync="pageNum"
                    :page-size.sync="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="unread.length">
                    </el-pagination>

            </el-tab-pane>
            <el-tab-pane label="已读" name="read">
                已读内容
                <ul>
                    <li v-for="item,index in readCom" :key="index">
                        <span>{{item.title}}</span>
                        <span>{{item.date}}</span>
                        <el-button type="danger" @click="handleDel(item,index)">删除</el-button>
                         <el-button @click="handleUnread(item,index)">还原未读</el-button>
                    </li>
                </ul>

                <!-- 分页 -->
                 <el-pagination

                    :current-page.sync="pageNum"
                    :page-size.sync="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="read.length">
                    </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="回收站" name="recycle">
                回收站的内容
                <li v-for="item,index in recycleCom" :key="index">
                        <span>{{item.title}}</span>
                        <span>{{item.date}}</span>
                      
                         <el-button @click="handleRestore(item,index)">还原</el-button>
                </li>
                <!-- 分页 -->
                  <el-pagination

                    :current-page.sync="pageNum"
                    :page-size.sync="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="recycle.length">
                    </el-pagination>
            </el-tab-pane>
        </el-tabs>
          <!-- <el-pagination
            :current-page.sync="pageNum"
            :page-size.sync="pageSize"
            layout="prev, pager, next, jumper"
            :total="total">
        </el-pagination> -->
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            activeName:"unread",
            unread:[],//存放未读消息
            read:[],//存放已读消息
            recycle:[],//存放回收站的消息
            pageNum:1,
            pageSize:3,
            total:0,
            obj:{},//存放请求过来的res.data
          
        }
    },
     created() {

        this.getList()
        console.log(this.$store.state.listObj);
    },
    // 计算属性
    computed:{
        // 总的分页  包含 已读 未读  回收站
        // curList() {
        // const start = (this.pageNum - 1) * this.pageSize;
        // const end = this.pageNum * this.pageSize
        // let list = this.$store.state.listObj[this.activeName];
        // this.total = list.length;
        // return list.slice(start, end)
        // },
        unReadCom(){
            let start = (this.pageNum-1)*this.pageSize
            let end = this.pageNum*this.pageSize
            return this.unread.slice(start,end)
        },
        readCom(){
            let start = (this.pageNum-1)*this.pageSize
            let end = this.pageNum*this.pageSize
           
            return this.read.slice(start,end)
        },
         recycleCom(){
            let start = (this.pageNum-1)*this.pageSize
            let end = this.pageNum*this.pageSize
           
            return this.read.slice(start,end)
        }
        
    },
    methods: {
        getList(){
            axios.get('tabs.json').then(res=>{
                console.log(res);
                // 解构赋值
                let {read,recycle,unread} = res.data
                this.read  = read
                this.unread = unread
                this.recycle = recycle
                // this.obj =res.data
                // console.log(this.obj);
                this.$store.commit('setObj',res.data)
            })
        },
        // 标为已读
        handleRead(item,idIndex){
            // 把点击的存放到已读数组里面
            this.read.push(item)
            // 找到点击的那一条的下标
            // let idIndex = this.unread.findIndex(it=>it == item)
            // 把找到的这条从 未读数组里面删除
            this.unread.splice(idIndex,1)


        },
        // 删除  从已读里面移除  存放到回收站
        handleDel(item,idIndex){

            this.recycle.push(item)
            console.log(this.recycle);
            // let idIndex = this.read.findIndex(it=>it == item)
            this.read.splice(idIndex,1)

        },
        // 还原未读
        handleUnread(item,idIndex){
            this.unread.push(item)
            // let idIndex = this.read.findIndex(it=>it == item)
            this.read.splice(idIndex,1)

        },
        // 还原
        handleRestore(item,idIndex){
           this.unread.push(item)
        //    let idIndex = this.recycle.findIndex(it=>it == item)
           this.recycle.splice(idIndex,1)
        }

        // handleClick(val){
        //     console.log(val);
        //     console.log(this.activeName);

        // }
    },
}
</script>
<style lang="scss" scoped>
.tabs{
    padding:30px 40px;
}
</style>
